// import React, {useCallback, useMemo, useState} from 'react';
import React,{useCallback, useMemo, useState} from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';

function Child({data,handleClick}){
  console.log('Child render');
  return <button onClick={handleClick}>{data.number}</button>
}

const MemoChild = React.memo(Child);

function App(){
  console.log('App render');
  const [number, setNumber] = useState(0);
  const [name, setName] = useState('ahhh');

  // const data = {number};
  const data = useMemo(()=>({number}),[number]);
  // const handleClick = () => setNumber(number + 1);
  const handleClick = useCallback(()=>setNumber(number + 1),[number]);

  return (
    <div>
      {/*↓ 注意： 我们这里的和react官方的有点不一样, react官方的onChange 其实相当于原生的oninput, 而我们这里是等价于原生的onchange, 即鼠标离开输入框才会算change*/}
      <input type="text" value={name} onChange={event => setName(event.target.value)}/>
      {/*<Child data={data} handleClick={handleClick}/>*/}
      <MemoChild data={data} handleClick={handleClick}/>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
